<template>
  <a-modal
    :visible="show"
    width="750px"
    height="60vh"
    title="项目变更打印"
    @ok="show = false"
    @cancel="show = false"
    :maskClosable="false"
    :key="show"
  >
    <template slot="footer">
      <a-button @click="show = false">取消</a-button>
      <a-button type="primary" @click="print">打印</a-button>
    </template>
    <div ref="print" id="print" style="width: 690px; page-break-after: always">
      <div class="pageTitle">工程项目变更申请</div>
      <div style="display: flex; justify-content: space-between">
        <div>变更单号:{{ changeRecord.projectChangeNo }}</div>
        <div>申请日期:{{ changeRecord.createTime }}</div>
      </div>
      <table cellspacing="1" cellpadding="0">
        <tr>
          <td class="title" style="width: 112px">申请人</td>
          <td class="info">{{ changeRecord.createUserName }}</td>
          <td class="title">申请部门</td>
          <td class="info">{{ changeRecord.createDeptName }}</td>
        </tr>
        <tr>
          <td class="title">责任人</td>
          <td class="info">{{ changeRecord.dutyDeptName }}</td>
          <td class="title">责任部门</td>
          <td class="info">{{ changeRecord.dutyDeptName }}</td>
        </tr>
        <tr>
          <td class="title">变更项目名称</td>
          <td class="info" colspan="3" style="text-align: left">{{ changeRecord.projectChangeName }}</td>
        </tr>
        <!---项目基本信息-->
        <tr>
          <td class="title" colspan="4" style="text-align: left">项目基本信息</td>
        </tr>
        <tr>
          <td class="title">项目名称</td>
          <td class="info" colspan="3" style="text-align: left">{{ changeRecord.projectName }}</td>
        </tr>
        <tr>
          <td class="title">WBS</td>
          <td class="info">{{ projectBuild.projectNo }}</td>
          <td class="title">项目类型</td>
          <td class="info">{{ getCodeNames(projectBuild.projectType, '项目子类') }}</td>
        </tr>
        <tr>
          <td class="title" rowspan="2">费用支出方</td>
          <td class="info" rowspan="2">{{ companyNames }}</td>
          <td class="title">项目经理A</td>
          <td class="info">{{ projectBuild.proManagerA }}</td>
        </tr>
        <tr>
          <td class="title">项目经理B</td>
          <td class="info">{{ projectBuild.proManagerB }}</td>
        </tr>
        <tr>
          <td class="title" rowspan="2">立项总投资计划<br />(不含税/万元)</td>
          <td class="info" rowspan="2">{{ budgetAmount0 }}</td>
          <td class="title">设备投资</td>
          <td class="info">{{ budgetAmount2 }}(不含税/万元)</td>
        </tr>
        <tr>
          <td class="title">电气投资</td>
          <td class="info">{{ budgetAmount1 }}(不含税/万元)</td>
        </tr>
        <!---项目变革信息-->
        <tr>
          <td class="title" colspan="4" style="text-align: left">项目变更信息</td>
        </tr>
        <tr>
          <td class="title">变更类型</td>
          <td class="info" colspan="3" style="text-align: left">
            <a-checkbox-group v-model="budgetChangeContentList">
              <a-checkbox
                v-for="(item, index) in codes['工程项目项目预算变更类型']"
                :key="'changeType_' + index"
                :value="item.code"
                v-if="item.code != 4"
                >{{ item.name }}</a-checkbox
              >
            </a-checkbox-group>
          </td>
        </tr>
        <tr>
          <td colspan="4" style="padding: 0px">
            <table cellspacing="1" cellpadding="0" style="border: 0px;width:688px">
              <tr>
                <td class="title" style="width: 110px">分项名称</td>
                <td class="title">WBS</td>
                <td class="title">原预算金额(元)</td>
                <td class="title">本次变更费用(元)</td>
              </tr>
              <tr v-for="(item, index) in budgetAmount3" :key="'budgetItem_' + index">
                <td class="info">{{ item.budgetItem }}</td>
                <td class="info">{{ item.wbsConcat }}</td>
                <td class="info">{{ item.originAmount }}</td>
                <td class="info">{{ item.changeAmount }}</td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="title">预算变化说明</td>
          <td class="info" colspan="3" style="text-align: left">
            <div>
              原来预算总费用（元）： <span>￥</span><span>{{ map.totalAmount }}</span
              ><span>（￥</span>{{ map.totalTenThousand }}<span style="margin-right: 20px">万）</span>
            </div>
            <div>
              <span >
                本次变更总费用（元）：
                <span style="color: red">
                <span>￥</span><span>{{ map.totalAmountChange }}</span>
                <span>（￥</span>{{ map.totalTenThousandChange }}<span style="margin-right: 20px">万）</span>
              </span>
              </span>
            </div>
            <div>
              历史变更总费用（元）：
              <span>￥</span><span>{{ map.amountHistory }}</span
              ><span>（￥</span>{{ map.amountHistoryTenThousand }}<span>万）</span>
            </div>
            <div>
              变更后总费用（元）：
              <span style="color: red">
              <span >￥</span><span>{{ map.afterAmount }}</span>
              <span >（￥</span>{{ map.afterAmountTenThousand }}<span>万）</span>
            </span>
            </div>
            
            <div>
              <span>
                变更费用百分比：
                <span>{{ map.changePercent + '%' }}</span>
              </span>
            </div>
          </td>
        </tr>
        <tr>
          <td class="title">变更原因说明</td>
          <td class="info" colspan="3" style="text-align: left">
            {{ changeRecord.changeReason }}
          </td>
        </tr>
        <tr>
          <td class="title">变更影响分析</td>
          <td class="info" colspan="3" style="text-align: left">
            {{ changeRecord.changeInfluence }}
          </td>
        </tr>
        <tr>
          <td colspan="4" style="padding: 0px">
            <table cellspacing="1" cellpadding="0" style="border: 0px;width:688px">
              <tr v-for="(item, index) in printComments.item1">
                <td class="title" :rowspan="(printComments.item1.length+4)" style="width: 30px; padding: 10px" v-if="(index==0)">审<br />批<br />意<br />见</td>
                <td class="info" :rowspan="printComments.item1.length" style="width: 80px" v-if="(index==0)">专业负责人</td>
                <td colspan="2">
                  <div style="padding: 5px 10px">
                    <div style="min-height: 30px">
                      {{ item.fullMessage }}
                    </div>
                    <div style="display: flex; justify-content: flex-end">
                      <span style="padding: 2px 5px; width: 120px"> 签名：{{ item.userName }} </span>
                      <span style="padding: 2px 5px; width: 130px">
                        日期：{{ formatDate(item.time || '', 'yyyy-MM-dd') }}
                      </span>
                      <span style="padding: 2px 5px; width: 70px">
                        {{ item.taskMessage }}
                      </span>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="info">相关部门主管</td>
                <td colspan="2">
                  <div style="padding: 5px 10px">
                    <div style="min-height: 30px">
                      {{ printComments.item2.fullMessage }}
                    </div>
                    <div style="display: flex; justify-content: flex-end">
                      <span style="padding: 2px 5px; width: 120px"> 签名：{{ printComments.item2.userName }} </span>
                      <span style="padding: 2px 5px; width: 130px">
                        日期：{{ formatDate(printComments.item2.time || '', 'yyyy-MM-dd') }}
                      </span>
                      <span style="padding: 2px 5px; width: 70px">
                        {{ printComments.item2.taskMessage }}
                      </span>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="info">项目经理A<br>综合回复</td>
                <td colspan="2">
                  <div style="padding: 5px 10px">
                    <div style="min-height: 30px">
                      {{ printComments.item3.fullMessage }}
                    </div>
                    <div style="display: flex; justify-content: flex-end">
                      <span style="padding: 2px 5px; width: 120px"> 签名：{{ printComments.item3.userName }} </span>
                      <span style="padding: 2px 5px; width: 130px">
                        日期：{{ formatDate(printComments.item3.time || '', 'yyyy-MM-dd') }}
                      </span>
                      <span style="padding: 2px 5px; width: 70px">
                        {{ printComments.item3.taskMessage }}
                      </span>
                    </div>
                  </div>
                </td>
              </tr>
              <tr>
                <td class="info">投资方负责人</td>
                <td colspan="2">
                  <div style="padding: 5px 10px">
                    <div style="min-height: 30px">
                      {{ printComments.item4.fullMessage }}
                    </div>
                    <div style="display: flex; justify-content: flex-end">
                      <span style="padding: 2px 5px; width: 120px"> 签名：{{ printComments.item4.userName }} </span>
                      <span style="padding: 2px 5px; width: 130px">
                        日期：{{ formatDate(printComments.item4.time || '', 'yyyy-MM-dd') }}
                      </span>
                      <span style="padding: 2px 5px; width: 70px">
                        {{ printComments.item4.taskMessage }}
                      </span>
                    </div>
                    </div>
                </td>
              </tr>
              <tr>
                <td class="info">总裁</td>
                <td colspan="2">
                  <div style="padding: 5px 10px">
                    <div style="min-height: 30px">
                      {{ printComments.item5.fullMessage }}
                    </div>
                    <div style="display: flex; justify-content: flex-end">
                      <span style="padding: 2px 5px; width: 120px"> 签名：{{ printComments.item5.userName }} </span>
                      <span style="padding: 2px 5px; width: 130px">
                        日期：{{ formatDate(printComments.item5.time || '', 'yyyy-MM-dd') }}
                      </span>
                      <span style="padding: 2px 5px; width: 70px">
                        {{ printComments.item5.taskMessage }}
                      </span>
                    </div>
                    </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
      </table>
    </div>
  </a-modal>
</template>
<script>
import { formatDate } from '@/utils/util'
import printJS from 'print-js'
import { CodesMixin } from '@/mixins/CodesMixin'
export default {
  mixins: [CodesMixin],
  components: {},
  data() {
    return {
      show: false,
      changeRecord: {},
      projectBuild: {},
      budgetChangeContentList: [],
      budgetItemTree: [],
      map: {},
      comments:[]
    }
  },
  computed: {
    companyNames() {
      let names = []
      if (this.budgetItemTree && this.budgetItemTree.length > 0) {
        this.budgetItemTree.forEach((b) => {
          if (b.children && b.children.length > 0) {
            names.push(b.children[0].factoryName)
          }
        })
      }
      return names.join(',')
    },
    budgetAmount0() {
      let changeAmountTotal = 0
      this.budgetItemTree.forEach((root) => {
        root.children.forEach((second) => {
          if (second.children && second.children.length > 0) {
            second.children.forEach((third) => {
              if (third.children && third.children.length > 0) {
                third.children.forEach((item) => {
                  changeAmountTotal += parseFloat(item.originAmount)
                })
              } else {
                changeAmountTotal += parseFloat(third.originAmount)
              }
            })
          } else {
            changeAmountTotal += parseFloat(second.originAmount)
          }
        })
      })
      return (changeAmountTotal / 10000.0).toFixed(2)
    },
    budgetAmount1() {
      let changeAmountTotal = 0
      this.budgetItemTree.forEach((root) => {
        root.children.forEach((second) => {
          if (second.children && second.children.length > 0) {
            second.children.forEach((third) => {
              if (third.children && third.children.length > 0) {
                third.children.forEach((item) => {
                  if (item.budgetItem == '电气分项') {
                    changeAmountTotal += parseFloat(item.originAmount)
                  }
                })
              } else {
                if (third.budgetItem == '电气分项') {
                  changeAmountTotal += parseFloat(third.originAmount)
                }
              }
            })
          } else {
            if (second.budgetItem == '电气分项') {
              changeAmountTotal += parseFloat(second.originAmount)
            }
          }
        })
      })
      return (changeAmountTotal / 10000.0).toFixed(2)
    },
    budgetAmount2() {
      let changeAmountTotal = 0
      this.budgetItemTree.forEach((root) => {
        root.children.forEach((second) => {
          if (second.children && second.children.length > 0) {
            second.children.forEach((third) => {
              if (third.children && third.children.length > 0) {
                third.children.forEach((item) => {
                  if (item.budgetItem == '设备分项') {
                    changeAmountTotal += parseFloat(item.originAmount)
                  }
                })
              } else {
                if (third.budgetItem == '设备分项') {
                  changeAmountTotal += parseFloat(third.originAmount)
                }
              }
            })
          } else {
            if (second.budgetItem == '设备分项') {
              changeAmountTotal += parseFloat(second.originAmount)
            }
          }
        })
      })
      return (changeAmountTotal / 10000.0).toFixed(2)
    },
    budgetAmount3() {
      let item1 = {}
      let item2 = {}
      let item3 = {}
      this.budgetItemTree.forEach((root) => {
        root.children.forEach((second) => {
          if (second.children && second.children.length > 0) {
            second.children.forEach((third) => {
              if (third.children && third.children.length > 0) {
                third.children.forEach((item) => {
                  if (item.budgetItem == '土建分项') {
                    item1 = item
                  } else if (item.budgetItem == '设备分项') {
                    item2 = item
                  } else if (item.budgetItem == '电气分项') {
                    item3 = item
                  }
                })
              } else {
                if (third.budgetItem == '土建分项') {
                  item1 = third
                } else if (third.budgetItem == '设备分项') {
                  item2 = third
                } else if (third.budgetItem == '电气分项') {
                  item3 = third
                }
              }
            })
          } else {
            if (second.budgetItem == '土建分项') {
              item1 = second
            } else if (second.budgetItem == '设备分项') {
              item2 = second
            } else if (second.budgetItem == '电气分项') {
              item3 = second
            }
          }
        })
      })
      if (!item1) {
        item1 = {}
        item1.budgetItem = '土建分项'
      }
      if (!item2) {
        item2 = {}
        item2.budgetItem = '设备分项'
      }
      if (!item3) {
        item3 = {}
        item3.budgetItem = '电气分项'
      }
      return [item1, item2, item3]
    },

    budgetAmount4() {
    },
    printComments() {
      let item1 = []
      let item2 = null
      let item3 = null
      let item4 = null
      let item5 = null
      this.comments.forEach((c) => {
        if (c.defId == 'disciplineLeader') {
          item1 = [...item1,...c.infoList]
        } else if (c.defId == 'disciplineLeaderSupervisor') {
          item2 = c.infoList[0]
        } else if (c.defId == 'projectManager') {
          item3 = c.infoList[0]
        } else if (c.defId == 'investor') {
          item4 = c.infoList[0]
        } else if (c.defId == 'president') {
          item5 = c.infoList[0]
        }
      })
      if (!item1) {
        item1 = [{}]
      }
      if (!item2) {
        item2 = {}
      }
      if (!item3) {
        item3 = {}
      }
      if (!item4) {
        item4 = {}
      }
      if (!item5) {
        item5 = {}
      }
      return { item1, item2, item3, item4, item5 }
    },
  },
  async mounted() {
    this.fetchCodes(['项目子类', '工程项目项目预算变更类型'])
  },
  watch: {},
  methods: {
    formatDate,
    open(changeRecord, projectBuild, budgetChangeContentList, budgetItemTree, map, comments) {
      this.changeRecord = changeRecord ? changeRecord : {}
      this.projectBuild = projectBuild ? projectBuild : {}
      this.budgetChangeContentList = budgetChangeContentList ? budgetChangeContentList : []
      this.budgetItemTree = budgetItemTree ? budgetItemTree : []
      this.map = map ? map : {}
      this.comments = comments ? comments : []

      let changeAmountTotal = 0
      let orignAmountTotal = 0
      this.budgetItemTree.forEach((root) => {
        orignAmountTotal += parseFloat(root.originAmount)
        changeAmountTotal+= parseFloat(root.changeAmount)
      })
      this.map.afterAmount = orignAmountTotal+changeAmountTotal
      this.map.afterAmountTenThousand =( this.map.afterAmount / 10000.0).toFixed(2)

      this.show = true
    },
    print() {
      // this.$printer(this.$refs.paymentPrint)
      //  this.$print(this.$refs.paymentPrint)
      printJS({
        printable: 'print',
        type: 'html',
        targetStyles: ['*'],
        scanStyles: false,
        maxWidth: '690px',
        style:
          '#printContainer {text-align: center;color: black;}#printContainer table {background-color: black;border:1px solid #000;border-collapse: collapse}#printContainer table td {background-color: white;border:1px solid #000;}#printContainer .label {font-size: 14px;text-align: center;font-weight: bold;}.pageTitle {font-size: 21px;font-weight: bold;text-align: center;}td {font-size: 14px;height: 30px;padding: 5px 5px;background: white;text-align: left;border:1px solid #000;}table {border:1px solid #000;border-collapse: collapse;border-width: 1.5px 1.5px 1.5px 1.5px;width: 690px;table-layout: fixed;background: black;} .title { font-weight: bolder; height: 38px; text-align: center;  .info { height: 36px; text-align: center; }',
      })
    },
  },
}
</script>
<style scoped>
.invoice-box {
  width: 21cm;
  min-height: 29.7cm;
  padding: 1cm;
  margin: 1cm auto;
  border: 1px #eee solid;
  background: white;
  font-size: 16px;
  line-height: 24px;
  color: #555;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
#printContainer {
  text-align: center;
  color: black;
}
#printContainer table {
  background-color: black;
  border: 1px solid #000;
  border-collapse: collapse;
}
#printContainer table td {
  background-color: white;
  border: 1px solid #000;
}
#printContainer .label {
  font-size: 14px;
  text-align: center;
  font-weight: bold;
}
.pageTitle {
  font-size: 21px;
  font-weight: bold;
  text-align: center;
}
td {
  font-size: 14px;
  height: 30px;
  padding: 5px 5px;
  background: white;
  text-align: left;
  border: 1px solid #000;
}
table {
  border: 1px solid #000;
  border-collapse: collapse;
  border-width: 1.5px 1.5px 1.5px 1.5px;
  width: 690px;
  table-layout: fixed;
  background: black;
}
.title {
  font-weight: bolder;
  height: 38px;
  text-align: center;
}
.info {
  height: 36px;
  text-align: center;
}
</style>
